<template>
    <div class="tabbar-box">
        <uv-tabbar :value="active" @change="handleChange">
            <uv-tabbar-item text="考试">
                <template v-slot:active-icon>
                    <text class="iconfont icon-kaoshi active-color"></text>
                </template>
                <template v-slot:inactive-icon>
                    <text class="iconfont icon-kaoshi"></text>
                </template>
            </uv-tabbar-item>
            <uv-tabbar-item text="学生">
                <template v-slot:active-icon>
                    <text class="iconfont icon-xueshengdangan active-color"></text>
                </template>
                <template v-slot:inactive-icon>
                    <text class="iconfont icon-xueshengdangan"></text>
                </template>
            </uv-tabbar-item>
            <uv-tabbar-item text="个人">
                <template v-slot:active-icon>
                    <text class="iconfont icon-geren active-color"></text>
                </template>
                <template v-slot:inactive-icon>
                    <text class="iconfont icon-geren"></text>
                </template>
            </uv-tabbar-item>
        </uv-tabbar>
    </div>
</template>

<script setup>

import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineProps } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app"
const props = defineProps({
    value: {
        type: Number,
        required: true
    }
})
const { proxy } = getCurrentInstance();

onShow(options => {
    state.active = props.value
})
const state = reactive({
    active: 0,
})

const page = [
    {
        index: 0,
        path: '/pages/index/index'
    },
    {
        index: 1,
        path: '/pages/teachers/index'
    },
    {
        index: 2,
        path: '/pages/person/index'
    },
]
const handleChange = (index) => {
    state.active = index
    const url = page.find(v => v.index === index).path
    console.log(url, 33)
    // proxy.$scope.getTabBar().setData({ selected: index, })
    uni.switchTab({
        url
    })
}

const { active } = toRefs(state)

</script>

<style lang="scss" scoped>
.tabbar-box {
    margin-top: 16rpx;
    height: 130rpx;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.active-color {
    color: #3371DC;
}

//底部安全距离
.tabBarAuto {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.TabBar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 130rpx;
    width: 750rpx;
    background-color: #fff;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tab {
    width: 150rpx;
    height: 130rpx;
    text-align: center;
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    .plain {
        margin-top: 8rpx;
        width: 44rpx;
        height: 44rpx;
    }

    .special {
        width: 78rpx;
        height: 78rpx;
    }

    .text {
        text-align: center;
        height: 20rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 20rpx;
        color: #383838;
        margin-top: 10rpx;

        &.active {
            color: #3371DC;
        }
    }
}
</style>